<template>
	<div v-if="childNodeP && propuptype !== 'detail'" class="add-node-btn-box">
		<div class="add-node-btn">
			<el-popover v-model="visible" placement="right-start" popper-class="add-node-popover">
				<div class="add-node-popover-body">
					<div class="add-node-popover-item approver" @click="addType(1)">
						<div class="item-wrapper">
							<img src="@/assets/images/sp.png" alt="" class="img-style">
						</div>
						<p>{{ $t('text.approvalPerson') }}</p>
					</div>
					<!-- <div class="add-node-popover-item notifier" @click="addType(2)">
            <div class="item-wrapper">
              <img src="@/assets/images/cs.png" alt="" class="img-style">
            </div>
            <p>抄送人</p>
          </div> -->
				</div>
				<button slot="reference" class="btn" type="button">
					<i style="color:#fff" class="el-icon-plus" />
				</button>
			</el-popover>
		</div>
	</div>
	<div v-else class="add-node-btn-box">
		<div class="add-node-btn">
			<button slot="reference" class="btn" type="button">
				<i style="color:#fff" class="el-icon-plus" />
			</button>
		</div>
	</div>
</template>
<script>
export default {
	props: ['childNodeP', 'tip', 'nowIndex', 'propuptype'],
	data() {
		return {
			visible: false,
			parentObj: {}
		}
	},
	mounted() { },
	methods: {
		addType(type) {
			this.visible = false
			let data
			if (type == 1) {
				data = {
					examines: [],
					examineType: '', // 审批人类型
					examineNames: '', // 审批人
					examineIds: '', // 审批人id
					examineWay: '', // 多人审批方式 1:会签 2:或签
					examineRange: '', // 选择范围（发起人自选） 1:全公司 2:指定成员 3:角色
					examineCross: 0, // 是否跨店  0:否 1:是
					examineOptional: 0, // 可选多人（发起人自选） 0:否 1:是
					type: 1 // //0 发起人  1 审批人  2抄送人
				}
			}
			else if (type == 2) {
				data = {
					ccs: [],
					ccIds: '', // 抄送人Id
					ccNames: '', // 抄送人
					ccOptional: 1, //发起人自选抄送人 0:否 1:是
					type: 2 // //0 发起人  1 审批人  2抄送人
				}
			}
			// this.$parent.setPerson(data, this.tip,'') //添加节点自动弹出弹框
			this.$parent.addNode(data, this.nowIndex)
		}
	}
}
</script>
<style lang="scss" scoped>
.add-node-btn-box {
	width: 100%;
	display: inline-flex;
	flex-shrink: 0;
	position: relative;

	&:first-child {
		margin-left: 16px;
	}

	&:before {
		content: '';
		position: absolute;
		top: 1px;
		left: 0px;
		right: 0;
		bottom: 0;
		z-index: -1;
		margin: auto;
		width: 1px;
		// height: 100%;
		background-color: #dfe6ec;
	}

	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		width: 0;
		height: 0;
		border-width: 6px 6px 0;
		border-style: solid;
		border-color: #dfe6ec transparent;
		left: 0px;
		right: 0;
		bottom: 0;
		z-index: 1;
		margin: auto;
	}
}

.img-style {
	width: 36px;
}

.add-node-popover {
	padding: 14px 26px;

	.add-node-popover-body {
		display: flex;

		.add-node-popover-item {
			margin-right: 20px;
			text-align: center;
			cursor: pointer;

			&:last-child {
				margin-right: 0;
			}

			i {
				font-size: 36px;
			}

			p {
				color: #333;
				margin-top: 4px;
			}
		}

		.approver {
			i {
				color: #e6a23c;
			}
		}

		.notifier {
			i {
				color: #4880ff;
			}
		}
	}
}
</style>
